<template>
  <div class="verify">
    <img class="code" :src="qrUrl" alt="验证码" @click="handleVerifyCode" />
  </div>
</template>

<script>
import { apiShopAdmin } from '@/properties/api.js'
import axios from 'axios'
axios.defaults.withCredentials = true
axios.defaults.crossDomain = true
export default {
  name: 'VerifyCode',
  props: {
    sign: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {
      qrUrl: ''
    }
  },
  mounted () {
    this.handleVerifyCode()
  },
  watch: {
    sign () {
      this.handleVerifyCode()
    }
  },
  methods: {
    handleVerifyCode () {
      let $this = this
      axios
        .get(apiShopAdmin.verifyCode, {
          responseType: 'blob'
        })
        .then(response => {
          const myBlob = new window.Blob([response.data], {
            type: 'image/jpeg'
          })
          $this.qrUrl = window.URL.createObjectURL(myBlob)
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>

<style scoped>
.txt {
  color: blue;
  font-size: 15px;
}
</style>
